<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制面板 - 智感桥安</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <h2>智感桥安</h2>
                <span>道路光纤监测系统</span>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="index.html" class="nav-link">首页</a>
                </li>
                <li class="nav-item">
                    <a href="diagram.html" class="nav-link">系统示意图</a>
                </li>
                <li class="nav-item">
                    <a href="metrics.html" class="nav-link">性能指标</a>
                </li>
                <li class="nav-item active">
                    <a href="control.html" class="nav-link">控制面板</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <h1>系统控制面板</h1>
            <p class="section-description">监控系统状态并执行管理操作</p>
            
            <div class="control-panel">
                <!-- 系统状态概览 -->
                <div class="panel-section">
                    <h2>系统状态概览</h2>
                    <div class="status-overview">
                        <div class="status-item">
                            <div class="status-indicator online"></div>
                            <span>数据采集系统</span>
                        </div>
                        <div class="status-item">
                            <div class="status-indicator online"></div>
                            <span>AI分析引擎</span>
                        </div>
                        <div class="status-item">
                            <div class="status-indicator warning"></div>
                            <span>预警系统</span>
                        </div>
                        <div class="status-item">
                            <div class="status-indicator online"></div>
                            <span>通信网络</span>
                        </div>
                    </div>
                </div>
                
                <!-- 实时监控 -->
                <div class="panel-section">
                    <h2>实时监控</h2>
                    <div class="monitoring-grid">
                        <div class="monitor-card">
                            <h3>桥梁应力监测</h3>
                            <div class="gauge-container">
                                <canvas id="stress-gauge" width="200" height="120"></canvas>
                                <div class="gauge-value" id="stress-value">--</div>
                            </div>
                            <div class="gauge-label">当前应力水平</div>
                        </div>
                        
                        <div class="monitor-card">
                            <h3>结构位移监测</h3>
                            <div class="gauge-container">
                                <canvas id="displacement-gauge" width="200" height="120"></canvas>
                                <div class="gauge-value" id="displacement-value">--</div>
                            </div>
                            <div class="gauge-label">位移量(mm)</div>
                        </div>
                        
                        <div class="monitor-card">
                            <h3>振动频率监测</h3>
                            <div class="gauge-container">
                                <canvas id="vibration-gauge" width="200" height="120"></canvas>
                                <div class="gauge-value" id="vibration-value">--</div>
                            </div>
                            <div class="gauge-label">频率(Hz)</div>
                        </div>
                        
                        <div class="monitor-card">
                            <h3>环境温度</h3>
                            <div class="gauge-container">
                                <canvas id="temperature-gauge" width="200" height="120"></canvas>
                                <div class="gauge-value" id="temperature-value">--</div>
                            </div>
                            <div class="gauge-label">温度(°C)</div>
                        </div>
                    </div>
                </div>
                
                <!-- 预警管理 -->
                <div class="panel-section">
                    <h2>预警管理</h2>
                    <div class="alerts-container">
                        <div class="alert-item critical">
                            <div class="alert-icon">⚠️</div>
                            <div class="alert-content">
                                <h4>高应力预警</h4>
                                <p>桥梁3号墩位检测到异常高应力，超出安全阈值15%</p>
                                <span class="alert-time">2分钟前</span>
                            </div>
                            <button class="alert-action">处理</button>
                        </div>
                        
                        <div class="alert-item warning">
                            <div class="alert-icon">⚠️</div>
                            <div class="alert-content">
                                <h4>位移异常</h4>
                                <p>主梁跨中位移持续增加，需关注结构变形趋势</p>
                                <span class="alert-time">15分钟前</span>
                            </div>
                            <button class="alert-action">处理</button>
                        </div>
                        
                        <div class="alert-item info">
                            <div class="alert-icon">ℹ️</div>
                            <div class="alert-content">
                                <h4>传感器维护提醒</h4>
                                <p>5号传感器即将到达维护周期，建议安排检修</p>
                                <span class="alert-time">1小时前</span>
                            </div>
                            <button class="alert-action">处理</button>
                        </div>
                    </div>
                </div>
                
                <!-- 系统控制 -->
                <div class="panel-section">
                    <h2>系统控制</h2>
                    <div class="control-grid">
                        <div class="control-group">
                            <h3>数据采集控制</h3>
                            <div class="control-buttons">
                                <button class="btn btn-primary" id="start-collection">开始采集</button>
                                <button class="btn btn-secondary" id="stop-collection">停止采集</button>
                                <button class="btn btn-outline" id="adjust-frequency">调整频率</button>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <h3>AI分析控制</h3>
                            <div class="control-buttons">
                                <button class="btn btn-primary" id="start-analysis">开始分析</button>
                                <button class="btn btn-secondary" id="stop-analysis">停止分析</button>
                                <button class="btn btn-outline" id="update-model">更新模型</button>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <h3>预警系统控制</h3>
                            <div class="control-buttons">
                                <button class="btn btn-primary" id="enable-alerts">启用预警</button>
                                <button class="btn btn-secondary" id="disable-alerts">禁用预警</button>
                                <button class="btn btn-outline" id="test-alert">测试预警</button>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <h3>系统维护</h3>
                            <div class="control-buttons">
                                <button class="btn btn-primary" id="backup-data">备份数据</button>
                                <button class="btn btn-secondary" id="system-check">系统检查</button>
                                <button class="btn btn-outline" id="export-report">导出报告</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 长安大学 - 智感桥安项目组. 版权所有.</p>
        </div>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>